<template>
	<u-popup v-model="value" mode="bottom" border-radius="20" height="auto" @close="close" :popup="false" :safeAreaInsetBottom="false">
		<view class="checkbox-popup-content" :style="{ height: height + 'px' }">
			<view class="checkbox-popup-header">
				<view class="checkbox-popup-header-btn"></view>
				<view class="checkbox-popup-header-title">{{ title }}</view>
				<view class="checkbox-popup-header-btn"></view>
			</view>
			<view class="single-member-scroll" :style="{ height: bodyHeight + 'px' }">
				<mescroll-uni ref="mescrollRef" @init="mescrollInit" @up="upCallback" :height="bodyHeight + 'px'" @down="downCallback">
					<u-radio-group :wrap="true" width="690rpx" v-model="checkUserId" :size="40" active-color="#F85962">
						<view class="single-member-item" v-for="(item, index) in list" :key="index">
							<u-radio :name="item.user.user_id">
								<view style="display: flex;">
									<image class="single-member-face" :src="item.user.avatar"></image>
									<view class="single-member-info">
										<view class="single-member-name">{{ item.user.nickName }}</view>
										<view class="single-member-real">{{ item.user.real_name }}</view>
										<view class="single-member-text">{{ item.user.province }} {{ item.user.city }}</view>
									</view>
								</view>
							</u-radio>
						</view>
					</u-radio-group>
				</mescroll-uni>
			</view>
			<view class="checkbox-bottom">
				<view class="checkbox-bottom-btn"><u-button type="main-theme" shape="circle" size="default" @click="confirm">确定</u-button></view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import Tools from '@/utils/Tools.js';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
	mixins: [MescrollMixin], // 使用mixin
	props: {
		value: {
			default: false,
			type: Boolean
		},
		title: {
			default: '选择单身会员',
			type: String
		},

		defaultUserId: {
			default: '',
			type: [Number, String]
		},
		gender: {
			default: 1,
			type: [Number, String]
		}
	},
	data() {
		return {
			list: [],
			height: null,
			checkUserId: null,
		};
	},
	watch: {
		value: {
			handler: function(newValue) {
				if (newValue) {
					this.checkUserId = this.defaultUserId;
					this.list = [];
				}
			},
			immediate: true
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		this.height = systemInfo.windowHeight - 44 - systemInfo.statusBarHeight - 40;
	},
	
	computed: {
		bodyHeight: function() {
			return this.height - uni.upx2px(210);
		}
	},
	methods: {
		upCallback(mescroll) {
			this.$u.api.getSingleList(mescroll.num, this.gender).then(res => {
				if (mescroll.num == 1) {
					this.list = res.data.list.data;
				} else {
					this.list.push(res.data.list.data);
				}
				this.mescroll.endBySize(res.data.list.data.length, res.data.list.total);
			});
		},
		close() {
			this.$emit('input', false);
		},
		confirm() {
			let flag = false;
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i].user.user_id == this.checkUserId) {
					this.$emit('confirm', { ...this.list[i].user });
					flag = true;
					break;
				}
			}
			if (!flag) {
				this.$emit('confirm', null);
			}
		}
	}
};
</script>

<style lang="scss">
.checkbox-popup-content {
	width: 750rpx;
	background-color: #fff;
	.checkbox-popup-header {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		.checkbox-popup-header-btn {
		}
	}
	.checkbox-popup-body {
		display: block;
		.checkbox-popup-group {
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx 40rpx 10rpx;
			.checkbox-popup-item {
				padding: 0 35rpx;
				font-size: 25rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				color: $uni-text-color-placeholder;
				border: 1rpx solid $uni-text-color-placeholder;
				margin-right: 20rpx;
				border-radius: 40rpx;
				margin-bottom: 20rpx;
				transition: all 0.2s ease-in-out;
				&.checked {
					background-color: $theme-main-color;
					border-color: $theme-main-color;
					color: #fff;
				}
			}
		}
	}
	.single-member-scroll {
		position: relative;
		.single-member-item {
			height: 140rpx;
			padding: 20rpx 0;
			position: relative;
			display: flex;
			padding: 0 40rpx;
			align-items: center;
			width: 750rpx;
			.single-member-face {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
				flex-shrink: 0;
				margin-left: 10rpx;
			}
			.single-member-info {
				height: 100rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 33rpx;
				.single-member-name {
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
				}
				.single-member-real {
					height: 30rpx;
					line-height: 30rpx;
					color: #666666;
					font-size: 22rpx;
				}
				.single-member-text {
					height: 30rpx;
					line-height: 30rpx;
					color: #999;
					font-size: 20rpx;
				}
			}
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 40rpx;
				right: 40rpx;
				background-color: #e4e4e4;
				height: 1rpx;
			}
		}
	}
	.checkbox-bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		padding: 0 40rpx 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		.checkbox-bottom-btn {
			width: 100%;
		}
	}
}
</style>
